<template>
	<view class="body">
		<view :class="[current === 0 ? 'green' : '' ,'top']">
			<view class="title">寄售余额（元）</view>
			<view class="disC">
				<view class="fz40">
					￥ {{amount?amount:"0.00"}}
				</view>
				<!-- 	<view class="" @click="Withdrawal()">
					提现
				</view> -->
			</view>

		</view>
		<view class="">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd disC" v-for="(item, index) in items" :key="item.value">
					<view style="font-size: 30rpx;">{{item.name}}</view>
					<view>
						<radio :value="item.value" :checked="index === current" backgroundColor='#fff'
							:activeBackgroundColor="index === 0 ? '#07c160' : '#6594ec'" />
					</view>

				</label>
			</radio-group>

		</view>
		<view class="bottom" v-if="current === 1">
			<view class="tips">
				<span class="bt"></span>个人信息
			</view>
			<view class="form">
				<view class="form_box">
					<view class="form_box_l">
						姓名
					</view>
					<view class="form_box_r">
						<input v-model="name" type="text" class="name" />

					</view>
				</view>
				<view class="form_box">
					<view class="form_box_l">
						支付宝账号
					</view>
					<view class="form_box_r">
						<input v-model="account" type="text" class="account" />

					</view>
				</view>
			</view>

		</view>
		<view class="bottom">
			<view class="tips">
				<span :class="[current === 0 ? 'green' : 'blue' , 'bt']"></span>提现金额
			</view>
			<view class="form">
				<view class="form_box">
					<view class="form_box_l">
						￥
					</view>
					<view class="form_box_r">
						<input v-model="price" type="text" class="name" />

					</view>
				</view>

			</view>

		</view>
		<view :class="[current === 0 ? 'green' : 'blue' , 'form_bottom']" @click="Withdrawal()">
			确认提现
		</view>
		<view :class="[current === 0 ? 'green_color_fff' : 'blue_color_fff' , 'form_tipss']">
			<view class="form_tips">
				<view class="form_tips_t">
					特别提示
				</view>
				<view class="form_tips_b">
					1、可提现时间09:00-21:00
				</view>
				<view class="form_tips_b">
					2、每日最高可提现200000元或10次
				</view>
				<view class="form_tips_b">
					3、支付宝提现时务必确保绑定的支付宝账号的实名姓名，与平台姓名一致，否则无法打款
				</view>



			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberBalance,
		walletFlow,
		withdraw,
		getMemberInfo,
		confirmWithdraw,
		getTicket
	} from '@/api.js'
	import wx from 'weixin-js-sdk'
	export default {


		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				amount: '',
				name: '',
				account: '',
				price: '',
				withdraw: '',
				list: {},
				userInfo: {},
				items: [{
						value: 'USA',
						name: '微信提现',
						checked: 'true'
					},
					{
						value: 'CHN',
						name: '支付宝提现'
					},

				],
				current: 0,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

		},
		onLoad() {
			this.init()
			this.GetUser()
		},
		onUnload() {
			uni.$emit('update', false)
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			async Withdrawal() {
				uni.showLoading({
					mask: true
				})
				const res = await withdraw({
					aliNumber: this.account,
					amount: this.price,
					name: this.name,
					type: this.current === 0 ? 1 : 2
				});
				if (res.code == 200) {
					console.log('提现返回结果', res.result);
					if (res.result && res.result.package_info) {
						this.ConfirmPay(res.result.orderNo, res.result.package_info)
					} else {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 2000,
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
						this.init()
					}
				}

			},
			async GetUser() {
				let res = await getMemberInfo({
					// token: uni.getStorageSync('token')
				})
				this.userInfo = res.result
				this.name = res.result.aliName
				this.account = res.result.aliNumber
				uni.setStorage({
					key: 'userInfo',
					data: JSON.stringify(res.result),
					success: function() {}
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + id
				})
			},

			init() {
				this.getTop()
				this.getList()
			},
			async getTop() {
				const res = await memberBalance({});
				this.withdraw = res.result.withdraw
				this.amount = res.result.amount
			},
			async getList() {
				const res = await walletFlow({
					time: this.date
				});
				this.list = res.result
			},
			// 获取签名
			async gtf() {
				let url = location.href.split('#')[0]
				const res = await getTicket({
					url: url
				})
				return res.result
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.getList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},
			async ConfirmPay(o, p) {
				let that = this
				let gtf = await this.gtf()
				console.log('gtf', gtf);
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: 'wx9b3253054a85a97a', // 必填，公众号的唯一标识
					timestamp: gtf.timestamp, // 必填，生成签名的时间戳
					nonceStr: gtf.nonceStr, // 必填，生成签名的随机串
					signature: gtf.signature, // 必填，签名
					jsApiList: ['requestMerchantTransfer'] // 必填，需要使用的JS接口列表
				});
				wx.ready(function() {
					console.log('进入rady');
					wx.checkJsApi({
						jsApiList: ['requestMerchantTransfer'],
						success: function(res) {
							console.log('res1111', res);
							if (res.checkResult['requestMerchantTransfer']) {
								WeixinJSBridge.invoke('requestMerchantTransfer', {
										mchId: '1712150439',
										appId: 'wx9b3253054a85a97a',
										package: p,
									},
									function(ress) {
										console.log('ress', ress);
										if (ress.err_msg === 'requestMerchantTransfer:ok') {
											uni.hideLoading()
											that.sendState(o) //调用这个方法扣款
											uni.navigateBack({
												delta: 1,
											})
										}
									}
								);
							} else {
								uni.hideLoading()
								alert('你的微信版本过低，请更新至最新版本。');
							}
						}
					});
				});
				wx.error(function(res) {
					console.log('111', res);

				});
			},
			async sendState(o) {
				let res = await confirmWithdraw(o)
				console.log('这个是扣钱返回', res);

			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		background: #f9f9f9;
		width: 100vw;
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;

		.top {
			background-color: #6594ec;
			padding: 40rpx;
			box-sizing: border-box;
			color: #fff;
			border-radius: 20rpx;

			.title {
				font-size: 26rpx;
			}

			.disC {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
			}

			.disF {
				display: flex;
				font-size: 26rpx;

				.p {
					color: #e8a732;

				}
			}

			.fz40 {
				font-size: 40rpx;
			}
		}

		.center {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.select_time {
				padding: 8rpx 40rpx;
				border: 1rpx solid #6594ec;
				border-radius: 10rpx;
				color: #6594ec;
				display: flex;
				align-items: center;

				.down {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
					transform: rotate(90deg);

				}

			}

			.gy {
				color: #999;
				font-size: 32rpx;
			}


		}

		.bottom {
			width: 710rpx;
			margin: 20rpx auto;
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			// margin-bottom: 30rpx;

			.tips {
				display: flex;
				align-items: center;

				.bt {
					display: block;
					width: 6rpx;
					height: 40rpx;
					background: #6594ec;
					margin-right: 10rpx;
				}
			}

			.lis {
				padding: 0 10rpx;
				box-sizing: border-box;
				height: calc(100vh - 320rpx - 160rpx);

				/deep/ ::-webkit-scrollbar {
					display: block;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: auto !important;
					background: transparent;
					overflow: auto !important;
				}

				.li {
					margin: 20rpx 0;


					&_top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							margin-left: 20rpx;
							display: flex;
							align-items: center;

							.time {
								font-size: 24rpx;
								color: #999;
							}

							.income {
								font-size: 28rpx;
								color: #e8a732;
								margin-left: 20rpx;
							}
						}

						.right {
							font-size: 28rpx;
						}
					}

					&_bottom {
						margin-top: 20rpx;
						display: flex;
						align-items: center;
						background: #F2F2F2;
						color: #828282;
						padding: 20rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						margin-bottom: 30rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.form {
		margin-bottom: 10rpx;
	}

	.form_box {
		display: flex;
		align-items: center;
		margin: 20rpx;
		padding: 20rpx 10rpx;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.form_box_l {
		font-weight: bold;
		font-size: 30rpx;
		margin-right: 20rpx;
	}

	.form_bottom {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #6594ec;
		color: #fff;
		margin: 30rpx 20rpx;
		// width: 710rpx;
		border-radius: 20rpx;
		font-weight: 400;
		font-size: 28rpx;

	}

	.form_tipss {
		background: #EEF6FD;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.form_tips {
		color: #4C9BFE;

		font-size: 26rpx;
		line-height: 35rpx;
		border-radius: 10rpx;
	}

	.form_tips_t {
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.form_tips_b {
		margin-bottom: 5rpx;
	}

	.disC {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		width: 100%;
	}

	.blue {
		background: #6594ec !important;
	}

	.blue_color {
		color: #6594ec !important;
	}

	.green {
		background: #07c160 !important;
	}

	.green_color {
		color: #07c160 !important;
	}

	.green_color_fff {
		background: #07c160 !important;

		.form_tips {
			color: #fff !important;
		}
	}

	.blue_color_fff {
		background: #6594ec !important;

		.form_tips {
			color: #fff !important;
		}
	}
</style>